{% extends "base.html" %}

{% block title %}{{ activity.title }} - Volunteer Platform{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Activity Status Banner -->
    {% if activity.status != 'approved' %}
    <div class="alert alert-{{ activity.status_class }} mb-4">
        Current Status: {{ activity.status_text }}
        {% if activity.status == 'rejected' and activity.reject_reason %}
        <br>Rejection Reason: {{ activity.reject_reason }}
        {% endif %}
    </div>
    {% endif %}

    <div class="row">
        <!-- Main Activity Information -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title">{{ activity.title }}</h2>
                    <div class="text-muted mb-3">
                        <span class="badge bg-primary">{{ activity.category }}</span>
                        <span class="ms-2">
                            <i class="fas fa-users"></i> 
                            Registered: {{ registration_count }}/{{ activity.max_participants }}
                        </span>
                    </div>
                    
                    <h5 class="mb-3">Activity Details</h5>
                    <p class="card-text">{{ activity.description }}</p>
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>Activity Time</h5>
                            <p>
                                <i class="far fa-calendar-alt"></i> 
                                Start: {{ activity.start_date.strftime('%Y-%m-%d %H:%M') }}<br>
                                End: {{ activity.end_date.strftime('%Y-%m-%d %H:%M') }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h5>Location</h5>
                            <p><i class="fas fa-map-marker-alt"></i> {{ activity.location }}</p>
                        </div>
                    </div>
                    
                    {% if session.get('role') == 'volunteer' %}
                        {% if not is_registered %}
                            <form method="POST" action="{{ url_for('activity_register', activity_id=activity.id) }}">
                                <button type="submit" class="btn btn-primary" 
                                        {% if registration_count >= activity.max_participants %}disabled{% endif %}>
                                    {% if registration_count >= activity.max_participants %}
                                        Full
                                    {% else %}
                                        Register Now
                                    {% endif %}
                                </button>
                            </form>
                        {% else %}
                            <div class="alert alert-info">
                                You are registered for this activity
                                {% if registration_status == 'pending' %}
                                    (Pending Review)
                                {% elif registration_status == 'approved' %}
                                    (Approved)
                                {% elif registration_status == 'rejected' %}
                                    (Rejected)
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            </div>

            <!-- Organization Information -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">Organizer Information</h5>
                    <p class="mb-2">
                        <strong>Organization Name:</strong><br>
                        {{ activity.organization_name }}
                    </p>
                    {% if activity.organization_introduction %}
                    <p class="mb-2">
                        <strong>Organization Introduction:</strong><br>
                        {{ activity.organization_introduction }}
                    </p>
                    {% endif %}
                    <p class="mb-2">
                        <strong>Contact Information:</strong><br>
                        <i class="fas fa-phone"></i> {{ activity.organization_phone }}<br>
                        <i class="fas fa-envelope"></i> {{ activity.organization_email }}
                    </p>
                    {% if activity.organization_address %}
                    <p class="mb-0">
                        <strong>Address:</strong><br>
                        <i class="fas fa-map-marker-alt"></i> {{ activity.organization_address }}
                    </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Action Buttons -->
            <div class="card mb-4">
                <div class="card-body">
                    {% if session.get('role') == 'admin' %}
                        {% if activity.status == 'pending' %}
                        <form action="{{ url_for('admin_approve_activity', activity_id=activity.id) }}" 
                              method="post" class="mb-2">
                            <button type="submit" class="btn btn-success w-100">Approve Activity</button>
                        </form>
                        <button type="button" class="btn btn-danger w-100" 
                                data-bs-toggle="modal" data-bs-target="#rejectModal">
                            Reject Activity
                        </button>
                        {% endif %}
                    {% elif session.get('role') == 'volunteer' %}
                        {% if activity.status == 'approved' and not is_registered %}
                            {% if activity.current_participants < activity.max_participants %}
                            <form action="{{ url_for('volunteer_register_activity', activity_id=activity.id) }}" 
                                  method="post">
                                <button type="submit" class="btn btn-primary w-100">Register</button>
                            </form>
                            {% else %}
                            <button class="btn btn-secondary w-100" disabled>Full</button>
                            {% endif %}
                        {% elif is_registered and registration %}
                            {% if registration.status == 'pending' %}
                            <button class="btn btn-warning w-100" disabled>Pending Review</button>
                            {% elif registration.status == 'approved' %}
                            <form action="{{ url_for('volunteer_cancel_registration', activity_id=activity.id) }}" 
                                  method="post">
                                <button type="submit" class="btn btn-danger w-100">Cancel Registration</button>
                            </form>
                            {% endif %}
                        {% endif %}
                    {% elif session.get('role') == 'organization' and session.get('user_id') == activity.organization_id %}
                        {% if activity.status == 'pending' or activity.status == 'approved' %}
                        <a href="{{ url_for('organization_edit_activity', activity_id=activity.id) }}" 
                           class="btn btn-primary w-100 mb-2">Edit Activity</a>
                        {% endif %}
                        <a href="{{ url_for('organization_registrations', activity_id=activity.id) }}" 
                           class="btn btn-info w-100">Manage Registrations</a>
                    {% endif %}
                </div>
            </div>

            <!-- Registration Status -->
            {% if session.get('role') in ['admin', 'organization'] %}
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Registration Status</h5>
                    <div class="list-group list-group-flush">
                        {% for registration in registrations %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">{{ registration.volunteer_name }}</h6>
                                    <small class="text-muted">
                                        Registration Time: {{ registration.created_at.strftime('%Y-%m-%d %H:%M') }}
                                    </small>
                                </div>
                                <span class="badge badge-{{ registration.status_class }}">
                                    {{ registration.status_text }}
                                </span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Reject Activity Modal -->
{% if session.get('role') == 'admin' and activity.status == 'pending' %}
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Activity</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ url_for('admin_reject_activity', activity_id=activity.id) }}" method="post">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="reject_reason" class="form-label">Rejection Reason</label>
                        <textarea class="form-control" id="reject_reason" name="reject_reason" 
                                  rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Confirm Rejection</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %} 